
<ul class="nav">
	<li class="hidden-folded padder m-t m-b-sm text-muted text-xs">Develop Example</li>
		<li ui-sref-active="active">
			<a ui-sref="app.home" ui-sref-opts="{reload: true}">
				<i class="glyphicon glyphicon-home icon text-primary-dker"></i>
				<b class="label bg-info pull-right">N</b>
				<span class="font-bold">Home Page</span>
			</a>
		</li>
	<li>
		<a href class="auto"> 
			<span class="pull-right text-muted">
				<i class="fa fa-fw fa-angle-right text"></i> 
				<i class="fa fa-fw fa-angle-down text-active"></i>
			</span> 
			<i class="glyphicon glyphicon-calendar icon text-info-dker"></i>
			<span class="font-bold">JSP-Mode</span>
		</a>
		<ul class="nav nav-sub dk">
			<li class="nav-sub-header"><a href> JSP-Mode </a></li>
			<li ui-sref-active="active"><a ui-sref="app.jsp.pagequery"><span>Page Query</span></a></li>
			<li ui-sref-active="active"><a ui-sref="app.jsp.beancrud"><span>Bean CRUD</span></a></li>
		</ul>
	</li>
	<li>
		<a href class="auto"> 
			<span class="pull-right text-muted">
				<i class="fa fa-fw fa-angle-right text"></i> 
				<i class="fa fa-fw fa-angle-down text-active"></i>
			</span> 
			<i class="glyphicon glyphicon-th-large icon text-success"></i>
			<span class="font-bold">Standard</span>
		</a>
		<ul class="nav nav-sub dk">
			<li class="nav-sub-header"><a href> Standard </a></li>
			<li ui-sref-active="active"><a ui-sref="app.standard.restfull" ui-sref-opts="{reload: true}"><b class="label bg-info pull-right">N</b><span>Restfull API</span></a></li>
			<li ui-sref-active="active"><a ui-sref="app.standard.logpush" ui-sref-opts="{reload: true}"><span>Log Push</span></a></li>
			<li ui-sref-active="active"><a ui-sref="layout.contact"><span>Cache Access</span></a></li>			
		</ul>
	</li>
	<li class="line dk"></li>
	
	<li class="hidden-folded padder m-t m-b-sm text-muted text-xs">Front Components</li>
	<li ng-class="{active:$state.includes('app.ui')}">
    	<a href class="auto">
	    	<span class="pull-right text-muted">
		       <i class="fa fa-fw fa-angle-right text"></i>
		       <i class="fa fa-fw fa-angle-down text-active"></i>
	      	</span>
      	  	<i class="glyphicon glyphicon-briefcase icon"></i><span>UI Kits</span>
    	</a>
    	<ul class="nav nav-sub dk">
    		<li class="nav-sub-header"><a href> UI Kits </a></li>
			<li ui-sref-active="active"><a ui-sref="app.ui.css">CSS Base</a></li>
			<li ui-sref-active="active"><a ui-sref="app.ui.bootstrap"><b class="badge bg-primary pull-right">16</b>Bootstrap</a></li>
			<li ui-sref-active="active"><a ui-sref="app.ui.fonts">Font Icons</a></li>
			<li ui-sref-active="active"><a ui-sref="app.ui.buttons">Buttions</a></li>      		
      		<li ui-sref-active="active"><a ui-sref="app.ui.grids">Grids</a></li>
      		<li ui-sref-active="active"><a ui-sref="app.ui.toaster">Toaster</a></li>
      		<li ui-sref-active="active"><a ui-sref="app.ui.dialog">Dialog</a></li>
      		<li ui-sref-active="active"><a ui-sref="app.ui.widgets"><b class="badge bg-success pull-right">13</b>Widgets</a></li>
      		<li ui-sref-active="active"><a ui-sref="app.ui.sortable">Sortable</a></li>
      		<li ui-sref-active="active"><a ui-sref="app.ui.portlet">Portlet</a></li>
      		<li ui-sref-active="active"><a ui-sref="app.ui.timeline">Timeline</a></li>
      	</ul> 
    </li> 
    <li ng-class="{active:$state.includes('app.table')}">
    	<a href class="auto">
	    	<span class="pull-right text-muted">
		       <i class="fa fa-fw fa-angle-right text"></i>
		       <i class="fa fa-fw fa-angle-down text-active"></i>
	      	</span>
      	  	<i class="glyphicon glyphicon-list"></i><span>Table</span>
    	</a>
    	<ul class="nav nav-sub dk">
    		<li class="nav-sub-header"><a href> Table </a></li>
			<li ui-sref-active="active"><a ui-sref="app.table.tablestatic">Static table</a></li>
			<li ui-sref-active="active"><a ui-sref="app.table.datatable">Datatable</a></li>
			<li ui-sref-active="active"><a ui-sref="app.table.footable">Footable</a></li>      		
      		<li ui-sref-active="active"><a ui-sref="app.table.nggrid">ngGrid</a></li>
      	</ul> 
    </li>
	<li ng-class="{active:$state.includes('app.tree')}">
    	<a href class="auto">
	    	<span class="pull-right text-muted">
		       <i class="fa fa-fw fa-angle-right text"></i>
		       <i class="fa fa-fw fa-angle-down text-active"></i>
	      	</span>
      	  	<i class="glyphicon glyphicon-tree-conifer icon"></i><span>Tree</span>
    	</a>
    	<ul class="nav nav-sub dk">
    		<li class="nav-sub-header"><a href> Tree </a></li>
			<li ui-sref-active="active"><a ui-sref="app.tree.navtree">Angular tree</a></li>
			<li ui-sref-active="active"><a ui-sref="app.tree.ztree"><b class="label bg-primary pull-right">2</b>zTree</a></li>
      	</ul> 
    </li>
    <li ng-class="{active:$state.includes('app.from')}">
    	<a href class="auto">
	    	<span class="pull-right text-muted">
		       <i class="fa fa-fw fa-angle-right text"></i>
		       <i class="fa fa-fw fa-angle-down text-active"></i>
	      	</span>
      	  	<i class="glyphicon glyphicon-edit"></i><span>Form</span>
    	</a>
    	<ul class="nav nav-sub dk">
    		<li class="nav-sub-header"><a href> Form </a></li>
    		<li ui-sref-active="active"><a ui-sref="app.form.elements">Form elements</a></li>
			<li ui-sref-active="active"><a ui-sref="app.form.validation">Form validation</a></li>
			<li ui-sref-active="active"><a ui-sref="app.form.fileupload">File upload</a></li>
			<li ui-sref-active="active"><a ui-sref="app.form.wizard">Form wizard</a></li>
			<li ui-sref-active="active"><a ui-sref="app.form.imagecrop">Image Crop</a></li>      		
      		<li ui-sref-active="active"><a ui-sref="app.form.select">Select</a></li>
      		<li ui-sref-active="active"><a ui-sref="app.form.slider">Slider</a></li>
      		<li ui-sref-active="active"><a ui-sref="app.form.editor">Editor</a></li>
      	</ul> 
    </li>
	<li ui-sref-active="active"> 
		<a ui-sref="app.chart">
			<i class="glyphicon glyphicon-signal"></i>
			<b class="badge bg-info pull-right">9</b><span>Chart</span>
		</a>
	</li>
	<li ui-sref-active="active"> 
		<a ui-sref="app.calendar">
			<i class="glyphicon glyphicon-th"></i><span>Calendar</span>
		</a>
	</li>
	<li ui-sref-active="active"> 
		<a ui-sref="app.imgview">
			<i class="glyphicon glyphicon-picture"></i><span>Image View</span>
		</a>
	</li>
	<li class="line dk hidden-folded"></li>

	<li class="hidden-folded padder m-t m-b-sm text-muted text-xs">Back Components</li>
	<li><a ui-sref="app.backcomponent.sqlmapper"> <i class="glyphicon glyphicon-hand-right icon"></i><span>SqlMapper</span></a></li>
	<li><a ui-sref="app.backcomponent.soap"> <i class="glyphicon glyphicon-cloud icon"></i><span>SOAP API</span></a></li>
	<li><a > <i class="fa fa-file-excel-o"></i><span>Excel Access</span></a></li>
</ul>